import React, {PureComponent} from 'react';
import routes from './routes';
import {Route, Switch} from 'react-router-dom';
import Breadcrumb from 'Shell/components/Breadcrumb';
import {Card} from 'antd';
import PropTypes from 'prop-types';
import 'ant-design-pro/dist/ant-design-pro.css';
import NoMatchRoute from '../common/NoMatchRoute';
import QueryPanel from './QueryPanel';
import TablePanel from './TablePanel';
export class App extends PureComponent {
    componentDidMount() {
        this.props.init();
    }

    render() {
        return (
            <div>
                <Route render={props => <Breadcrumb location={props.location} />} />
                <div className="page-main">
                    <Switch>
                        <Route
                            path={routes.query.url()}
                            exact
                            render={() => (
                                <div>
                                    <Card>
                                        <QueryPanel />
                                    </Card>
                                    <Card>
                                        <TablePanel />
                                    </Card>
                                </div>
                            )}/>
                        <NoMatchRoute link={routes.query.url()} />
                    </Switch>
                </div>
            </div>
        );
    }
}


App.propTypes = {
    init: PropTypes.func,
};

import {connect} from 'react-redux';
import {getInitData} from './actions.js';

const mapDispatchToProps = dispatch => ({
    init: () => dispatch(getInitData()),
});

export default connect(null, mapDispatchToProps)(App);
